<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import CardItem from './card.vue';
// import Search from './search.vue';
import FlexWrap from '@/components/flex-wrap/index.vue';
import RouterJump from '@/components/router-jump/index.vue';
import { queryServicePackage } from '@/api';
import PageStatus from '@/components/page-status/index.vue';
import { useRoute } from 'vue-router';

const list = ref([]);
const loading = ref(true);
const route = useRoute();

// onMounted(() => {
// 	queryServicePackage().then((res) => {
// 		list.value = res.Data?.Packages || [];
// 	}).finally(() => {
// 		loading.value = false;
// 	});
// });

watchEffect(() => {
	if (route.path) {
		queryServicePackage().then((res) => {
			list.value = res.Data?.Packages || [];
		}).finally(() => {
			loading.value = false;
		});
	}
});

</script>

<template>
	<div class="flex justify-between p20 pb0 b-top-#eee bg-white">
		<h3>服务包列表</h3>
		<RouterJump to="/care/add" type="primary" text="添加服务包"></RouterJump>
	</div>
	<PageStatus :loading="loading" :empty="list.length === 0">
		<FlexWrap>
			<CardItem v-for="(item, index) in list" :item="item" :key="index"></CardItem>
		</FlexWrap>
	</PageStatus>
</template>
<style scoped></style>
